<script name="Seek" setup>
import { reactive, onMounted } from 'vue';
import { getMenuListApi } from '@/api/menu.js'
import { transListToTreeData } from "../../../utils/tree";

import { menuInfoApiList,useButtonStatus } from '@/hooks'
const buttonStatus = useButtonStatus();
const menuInfoApi = menuInfoApiList()
// console.log(menuInfoApi);

/* ================列表渲染================ */
const queryData = reactive({
  icon: '',
  id: '',
  name: '',
  path: '',
  pid: '',
  status: '',
  title: '',
  type: "",
  weight: 1000
})
const total = ref(0)
const list = ref([])
const initData = async () => {
  let res = await getMenuListApi(queryData)
  console.log(res);
  res = transListToTreeData(res.data, 0);
  list.value = res
  // console.log(list,value);
  total.value = res.length
}
onMounted(() => {
  initData()
})

// 显示类型文字
const btStateList = (val) => {
  let res = buttonStatus.find((item) => item.value === val);
  return res ? res.label : "未知";
};
</script>
<template>
  <div class="app-container">
    <span style="font-weight: 700;">菜单管理</span> <span>主要用于系统的菜单和按钮权限进行管理</span>

    <el-card>
      <!-- 新增菜单 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary">新增菜单</el-button>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" border style="width: 100%;margin-bottom: 20px;" lazy row-key="id" default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="名称" prop="title">
        </el-table-column>

        <el-table-column label="路由地址" prop="path">
        </el-table-column>

        <el-table-column label="图标" prop="icon">
          <template #default="{ row }">
            <!-- <i :class="`el-icon-${row.icon}`"></i> -->
            <!-- <svg-icon :icon-class="row.name || '#'"></svg-icon>
             -->
             <el-icon>
              <bicycle/>
             </el-icon>
          </template>
        </el-table-column>

        <el-table-column label="标识" prop="name">
        </el-table-column>
        <el-table-column label="类型" prop="type">
          <template #default="{ row }">
            <el-tag :type="btStateList(row.type) === '按钮' ? 'Brand' : 'success'" disable-transitions>{{
              btStateList(row.type) }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="权重" prop="weight">
        </el-table-column>

        <el-table-column label="状态" width="150px">
          <template #default="{ row }">
            <el-switch :value="row.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
              :inactive-value="0" active-text="显示" inactive-text="隐藏">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <el-link class="link" type="primary" :underline="false">添加子集</el-link>
          <el-link class="link" type="primary" :underline="false">编辑</el-link>
          <el-link class="link" type="primary" :underline="false">删除</el-link>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.link {
  margin-left: 5px;
}
</style>